<template>
  <basic-container>
    <div id="main" style="width: 800px;height: 600px"></div>
  </basic-container>
</template>

<script>
import * as echarts from 'echarts';
import * as moment from "moment";
//import * as moment from 'moment';
export default {
  name: "echarts-test1",
  data() {
    return {
      data: [],
      xAxis: {
        type: 'time',
        splitLine: {
          show: false
        },
        splitNumber: 8,
        axisLine: {
          show: true,
          symbol: ['none','arrow'],
        }
      },
      option: {
        title: {
          text: 'Dynamic Data & Time Axis'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            //拿到series中的第一个序列数据
            let data = params[0];
            //data 才是一条数据
            return (moment(data[0]).format('YYYY/MM/DD HH:mm:ss') + '  ' + data[1]);
          },
          axisPointer: {
            type: 'cross',
            animation: false,
          }
        },
        xAxis: {

        },
        yAxis: [
          {
            type: 'value',
            name: '喷煤量',
            position: 'left',
            axisLabel: {
              formatter: '{value} kg'
            },
            axisLine: {
              show: true,
              symbol: ['none','arrow'],
            },
          },
          {
            type: 'value',
            name: '压力',
            position: 'right',
            axisLabel: {
              formatter: '{value} kPa'
            },
            axisLine: {
              show: true,
              symbol: ['none','arrow'],
            },
          }
        ],
        series: [
          {
            name: '喷煤量',
            type: 'line',
            yAxisIndex: 0,
            showSymbol: false,
          },
          {
            name: '压力',
            type: 'line',
            yAxisIndex: 1,
            showSymbol: false,
          }
        ]
      },
      value: Math.random() * 1000,
      myChart: null,
      minTime: null,
      maxTime: null,
    };
  },
  created() {
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initTimeRange(){
      this.maxTime = new Date();
      this.minTime = moment(this.maxTime).subtract(8,'minutes').toDate();
      //优化一下最小时间：数据少时按数据的最小时间，数据时间间隔超过最大时间间隔时取当前时间前8小时的时间点
      this.xAxis.min = this.minTime;
      this.xAxis.max = this.maxTime;
    },
    initEcharts() {
      let chartDom = document.getElementById('main');
      this.myChart = echarts.init(chartDom);
      this.initTimeRange();
      this.initTestData();
      this.option.series[0].data = this.data;
      this.option.series[1].data = this.data;
      this.option.xAxis = this.xAxis;
      this.myChart.setOption(this.option);
    },
    initTestData() {
      let data = this.data;
      let rd = this.randomData;
      let initTimeRange = this.initTimeRange;
      let myChart = this.myChart;
      let xAxis = this.xAxis;
      setInterval(function () {
        initTimeRange();
        if(data.length > 2000){
          //todo 数据个数需要根据时间段及频率计算
          data.shift();
        }
        let newData = rd();
        data.push(newData);
        myChart.setOption({
          xAxis:{
            ...xAxis,
          },
          series: [
            {
              data: data,
            },
            {
              data: data,
            }
          ]
        });
      }, 1000);
    },
    randomData() {
      this.value = this.value + Math.random() * 21;
      //type = time时，数据为数组。提供给series.data的数据可以是数组格式：[time, 值],
      //或者对象格式 {a:'',b:'',value:[time,值]}，当每条数据包含其它多种信息时，可以使用第二种格式。如果只有时间，值，可以使用第一种格式
      return [new Date(), Math.round(this.value)];
    }
  }
};
</script>

<style scoped></style>